<template>
  <div class="about-page">
    <app-header />
    
    <div class="page-content">
      <section class="intro-section">
        <h1>关于我们</h1>
        <p class="description">
          小王闲谈是一个专注于技术分享和软件资源的平台。我们致力于为开发者和用户提供高质量的技术文章和精选软件资源。
        </p>
      </section>

      <section class="platform-section">
        <h2>我们的平台</h2>
        <div class="platforms">
          <div class="platform-card">
            <div class="icon">
              <i class="el-icon-chat-dot-square" v-if="!isMobileDevice"></i>
              <van-icon name="chat-o" v-else />
            </div>
            <h3>微信公众号</h3>
            <p>小王闲谈</p>
            <div class="qrcode">
              <!-- 替换为实际的二维码图片 -->
              <el-image v-if="!isMobileDevice" src="/qrcode.jpg" fit="cover" />
              <van-image v-else src="/qrcode.jpg" fit="cover" />
            </div>
          </div>

          <div class="platform-card">
            <div class="icon">
              <i class="el-icon-mobile" v-if="!isMobileDevice"></i>
              <van-icon name="apps-o" v-else />
            </div>
            <h3>微信小程序</h3>
            <p>小王软件园</p>
            <div class="qrcode">
              <!-- 替换为实际的二维码图片 -->
              <el-image v-if="!isMobileDevice" src="/miniapp-qrcode.jpg" fit="cover" />
              <van-image v-else src="/miniapp-qrcode.jpg" fit="cover" />
            </div>
          </div>
        </div>
      </section>

      <section class="contact-section">
        <h2>联系我们</h2>
        <div class="contact-info">
          <div class="contact-item">
            <i class="el-icon-message" v-if="!isMobileDevice"></i>
            <van-icon name="envelop-o" v-else />
            <span>邮箱：contact@example.com</span>
          </div>
          <div class="contact-item">
            <i class="el-icon-chat-line-square" v-if="!isMobileDevice"></i>
            <van-icon name="chat-o" v-else />
            <span>微信：wangxiantan</span>
          </div>
        </div>
      </section>
    </div>

    <app-footer />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { isMobile } from '@/utils/device'
import AppHeader from '@/components/layout/AppHeader.vue'
import AppFooter from '@/components/layout/AppFooter.vue'

const isMobileDevice = ref(isMobile())
</script>

<style lang="scss" scoped>
.about-page {
  padding-top: 60px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  .page-content {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;

    section {
      margin-bottom: 60px;
      text-align: center;

      h1, h2 {
        margin-bottom: 30px;
      }
    }
  }
}

.intro-section {
  .description {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.2em;
    line-height: 1.6;
    color: #666;
  }
}

.platforms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  margin: 0 auto;
  max-width: 800px;

  .platform-card {
    padding: 30px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;

    .icon {
      font-size: 2em;
      color: #409EFF;
      margin-bottom: 20px;
    }

    h3 {
      margin-bottom: 10px;
      color: #333;
    }

    p {
      color: #666;
      margin-bottom: 20px;
    }

    .qrcode {
      width: 200px;
      height: 200px;
      margin: 0 auto;
      background: #f5f5f5;
    }
  }
}

.contact-section {
  .contact-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;

    .contact-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 1.1em;
      color: #666;

      i {
        color: #409EFF;
      }
    }
  }
}

// 移动端样式
@media screen and (max-width: 768px) {
  .about-page {
    .page-content {
      padding: 15px;

      section {
        margin-bottom: 40px;
      }
    }
  }

  .platforms {
    gap: 20px;

    .platform-card {
      padding: 20px;

      .qrcode {
        width: 150px;
        height: 150px;
      }
    }
  }
}
</style> 